 <template>
   <div class="navigationTabBar">
    <div class="navigation-item" @click="() => router.push(item.url)" :class="{ 'active-tab': item.url === route.path, 'active-home': item.url === route.path && item.name === '首页' }" v-for="item in tabBarList" :key="item.name">
        <img v-if="item.url === route.path" :src="item.active" :alt="item.name">
        <img v-else :src="item.img" :alt="item.name">
       <p> {{ item.name }}</p>
    </div>
   </div>
 </template>
 
 <script setup>
 import home from '@/assets/image/mobile/mine/Component 322@2x.png'
 import manuscriptCenter from '@/assets/image/mobile/mine/Component 317@2x.png'
 import mine from '@/assets/image/mobile/mine/Component 285@2x.png'
 import home1 from '@/assets/image/mobile/mine/Component 323@2x.png'
 import manuscriptCenter1 from '@/assets/image/mobile/mine/Component 318@2x.png'
 import mine1 from '@/assets/image/mobile/mine/Component 286@2x.png'
 import { useRoute, useRouter } from "vue-router";

 const route = useRoute();
 const router = useRouter();

 const tabBarList = [
    {
        name:'首页',
        url:'/',
        img: home,
        active: home1
    },
    {
        name:'稿件中心',
        url:'/manuscriptCenter',
        img: manuscriptCenter,
        active: manuscriptCenter1
    },
    {
        name:'我的',
        url:'/mine',
        img: mine,
        active: mine1
    }
 ]
 
 </script>
 
 <style lang="scss" scoped>
 .navigationTabBar{
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 6px 0;
    box-shadow: 0px -4px 8px 0px rgba(0,0,0,0.1);
    // position: relative;
    // z-index: 1;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 20;
    .navigation-item{
        display: flex;
        flex-direction: column;
        align-items: center;
        font-weight: bold;
        font-size: 12px;
        color: #999999;
        img{
            height: 22px;
        }
        p{
            margin-top: 8px;
        }
    }
    .active-tab{
        color: #4560E6;
    }
    .active-home{
        color: #333;
    }
 }
 </style>
 